/*   
Theme Name: DuyTan's Website
Theme URI: http://webdesign.com
Description: Design layout for website, convert psd file to html/css code
Author: Duy Tan
Author URI: http://webdesign.com/duytan
Version: 1.1
*/


/* RESET CSS */
@media screen {

* {margin: 0; padding: 0;}
html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

ul, ol {list-style: none;}


article, aside, figure, footer, header, hgroup, menu, nav, section {display: block; }

.group:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group {display: inline-block; clear: both;}
/* start commented backslash hack \*/ * html .group {height: 1%;} .group {display: block;} /* close commented backslash hack  */   

body { font: Time new romans, Arial, sans-serif;}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5 {}
a img {border: 0;}
a {color: #ce9702; text-decoration: none;}
.zoomer:active {top: 0;}

/*HEADER*/
header { border-bottom: 1px solid #f6f6f6;}
header section{width: 960px;margin: 0 auto; overflow: hidden;}

h1.logo {float: left; margin: 20px 0px 0px 0px;}
h1.logo a{font-family: UTM Soraya; font-size: 50px; color: #484848;}
h1.logo a span {color: #a2c852;}

header nav {float: right; margin: 45px 20px;}
header ul li {display: inline-block; }
header ul li a {font-size: 18px; color: #484848; font-family: Time new romans; display: block; padding: 0px 20px 0px 20px; height: 35px; text-align: center; line-height: 35px;}
header ul li a:hover {background: #a2c852;border-radius: 3px;}
header ul li a.active {background: #a2c852;border-radius: 3px;}
header ul li.active a{background: #a2c852;border-radius: 3px;}
/*SLIDER*/
section#slider {width: 100%; height: 353px; background: #bcbcbc;}
section#slider .line {width: 100%; height: 1px; border-top:1px solid #f6f6f6;}

/*MAIN*/
section#main {width: 960px; margin: 65px auto 0 auto;}

/*ICONBOX*/
article{overflow: hidden;}
article section#box {margin: 50px 0px;}

article section.iconbox {width: 295px; display: inline-block; margin: 0px 20px 0px 2px;}

article section.learning h1 {height: 58px; line-height: 58px; text-align: center; font-size: 22px; font-family: Time new romans; background: url(img/iconbox1.png) no-repeat;}
article section.learning h1:hover {background: url(img/iconbox1-hover.png) no-repeat;}

article section.design h1 {height: 58px; line-height: 58px; text-align: center; font-size: 22px; font-family: Time new romans; background: url(img/iconbox2.png) no-repeat;}
article section.design h1:hover {background: url(img/iconbox2-hover.png) no-repeat;}

article section.code h1 {height: 58px; line-height: 58px; text-align: center; font-size: 22px; font-family: Time new romans; background: url(img/iconbox3.png) no-repeat;}
article section.code h1:hover {background: url(img/iconbox3-hover.png) no-repeat; }

article section.iconbox p {text-align: justify; font-family: Time new romans; font-size: 15px; line-height: 1.7em; margin: 10px 0px 0px 0px;}

section.join {width: 957px; height: 95px; margin: 20px auto; background: #f6f6f6; border-left: 3px solid #a2c852; overflow: hidden;}
section.join h1 {font-family: Time new romans; font-size: 25px; float: left; line-height: 95px; margin: 0px 0px 0px 20px;}
section.join a {float: right; line-height: 61px; text-align:  center; margin: 15px 50px 0px 0px; text-transform: uppercase; font-size: 25px; font-family: Time new romans;
color: white; display: block; width: 217px; height: 61px; border-radius: 5px; background: #a2c852;}
section.join a:hover {background: #959595;}

/*SERVICES*/
section#acordion {width: 960px; margin: 50px auto; overflow: hidden;}
section#acordion h1 {font-family: Time new romans; font-size: 20px; width: 100%; border-bottom: 1px solid #a2c852;}

section.services {width: 470px; float: left;}



section.services ul {width: 100%; margin-top: 20px;}

section.services ul li{overflow: hidden; margin: 0px 0px 15px 0px;}

section.services ul li a{float: left;display: block; width: 23px; height:48px; background: url(img/meta.png); text-indent: -9999px;}

section.services ul li section {float: right; width: 437px; min-height: 48px; background: #f6f6f6;}
section.services ul li section h3 {font-size: 18px; margin: 10px 0px 0px 10px;}
section.services ul li section p {text-align: justify; font-size: 14px; margin: 10px; line-height: 1.7em;}

section.form{width: 460px; float: right;}
section.form form {margin:  20px 0px;}
section.form form fieldset {margin-bottom: 15px;}
section.form input {width: 98%; padding: 15px 3px; border: 1px solid #f6f6f6; background: #f6f6f6; }
section.form input:focus {border: none;}
section.form textarea {width: 350px; border: 1px solid #f6f6f6;background: #f6f6f6; height: 100px;}
section.form a {float: right; line-height: 100px; text-align:  center; text-transform: uppercase; font-size: 20px; font-family: Time new romans;
color: white; display: block; width: 100px; height: 100px; background: #a2c852;}

/*RECENT*/
section#recent {width: 100%; position: relative; margin: 50px 0px 20px 0px;}

section#recent h1 {font-family: Time new romans; font-size: 20px; width: 100%; border-bottom: 1px solid #a2c852;}

section#recent section {width: 100%;}

section#recent section button {width: 35px; height: 35px; background: #a2c852 url(img/next.png) center no-repeat; border: none; cursor: pointer;}
section#recent section button.next {position: absolute; top: -15px; right: 0;}
section#recent section button.next:hover {background: #bcbcbc url(img/next.png) center no-repeat;}
section#recent section button.prev {position: absolute; top: -15px; right: 37px; background: #a2c852 url(img/prev.png) center no-repeat }
section#recent section button.prev:hover {background: #bcbcbc url(img/prev.png) center no-repeat;}

section#recent section ul {margin: 10px 0px; overflow: hidden;}
section#recent section li {margin-right: 10px; height: 250px; text-align: center; width: 300px; }

section#recent section li img {height: 200px; margin: 2px auto;}

section#recent .anyClass {margin: 10px 0px;} 

/*FOOTER*/
footer{width: 100%; background: #3d3d3d; border-top: 5px solid #535353; /*position: fixed; bottom: 0px; z-index: 9999;*/}

footer section {width: 960px; height: 60px; margin: 0 auto;}

footer section small {float: left; line-height: 60px; font-size: 13px; color: white; font-weight: bold;}
footer section small a {color: #a2c852;}

footer nav ul{line-height: 60px; float: left;}
footer nav ul li {display: inline-block; margin: 0px 5px 0px 10px;}
footer nav ul li:nth-child(1) a {border-left: 2px solid white; padding-left: 10px;}
footer nav ul li a {font-size: 13px; color: white; font-family: Time new romans; font-weight: bold;}
footer nav ul li a:hover {color: #a2c852;}

footer section ul.social {float: right;}
footer section ul.social li {display: inline-block; margin: 15px 5px 0px 5px; width: 32px; height: 32px; }

footer section ul.social li a {font-size: 13px; color: white; font-weight: bold; display: block; width: 32px; height: 32px; text-indent: -9999px;}

footer section ul.social li:nth-child(1){background: url(img/social/facebook_dark.png) center;}
footer section ul.social li:nth-child(1):hover {background: url(img/social/facebook_active.png) center;}

footer section ul.social li:nth-child(2){background: url(img/social/google_dark.png) center;}
footer section ul.social li:nth-child(2):hover {background: url(img/social/google_active.png) center;}

footer section ul.social li:nth-child(3){background: url(img/social/skype_dark.png) center;}
footer section ul.social li:nth-child(3):hover {background: url(img/social/skype_active.png) center;}

footer section ul.social li:nth-child(4){background: url(img/social/flickr_dark.png) center;}
footer section ul.social li:nth-child(4):hover {background: url(img/social/flickr_active.png) center;}


/*TOP*/
a.top {display: block; height: 40px;display: none; width: 40px; position: fixed; bottom: 10px; right: 10px; background: #777777 url(img/top.png) no-repeat center; text-indent: -99999px;}
a.top:hover {background: #a2c852 url(img/top.png) no-repeat center;}


/***ABOUT**/


}/* end screen */